<template>
  <section class="DrawShapesDemo">
    <el-button @click="manual=!manual">Draw</el-button>
    <my-map
      adapter="Amap"
      width="100%"
      height="100%"
      ref="myMap"
      :min-zoom="4"
      :max-zoom="19"
      :center="center"
      projection="EPSG:3857"
      style="cursor: pointer"
      @ready="mapReady"
    >
      <my-map-scale />
      <my-map-zoom />
      <oce-draw-shapes />
      <my-map-pointer></my-map-pointer>
    </my-map>
  </section>
</template>

<script>
import {
  MyMap,
  MyMapScale,
  MyMapZoom,
  MyMapPointer
} from "$ui/map";
import 'ol/ol.css';
import Draw, {
  createBox,
  createRegularPolygon,
} from 'ol/interaction/Draw';
import Map from 'ol/Map';
import Polygon from 'ol/geom/Polygon';
import View from 'ol/View';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {Snap, Modify} from 'ol/interaction'
import { transform } from "ol/proj";
import parseStyle from '@/utils/style'

export default {
  name: "DrawShapesDemo",
  components: {
    MyMap,
    MyMapScale,
    MyMapZoom,
    MyMapPointer
  },
  data() {
    return {
      center: transform(
        [parseFloat(118.120866), parseFloat(24.497659)],
        "EPSG:4326",
        "EPSG:3857"
      ),
      olMap: "",
      myMap: "",
      layer: null,
      drawInstance: '',
      snapInstance:'',
      effect: {
        fill: 'rgba(255, 255, 255, 0.5)',
        stroke: {
          color: '#409eff',
          width: 2
        },
        circle: {
          radius: 6,
          fill: '#409eff',
          stroke: {
            width: 1,
            color: '#fff'
          }
        }
      }
    }
  },
  props:{
    // 画笔样式
    brush: {
      type: [Object, Function]
    },
  },
  methods:{
    getStyle(config) {
      if (!config) return null
      return typeof config === 'function'
        ? config()
        : parseStyle(config)
    },
    // 地图初始化完成
    mapReady(map, vm) {
      this.olMap = map;
      this.myMap = vm;
      // this.myMap.mapReady(this.init)
    },
    // 初始化Draw
    init(map) {
      if (this.layer) return
      const source = new VectorSource()
      const style = this.getStyle(this.effect)
      this.layer = new VectorLayer({
        source,
        style
      })
      map.addLayer(this.layer)
      if (!this.manual) {
        this.draw()
        this.modify()
      }
      this.$emit('ready', this)
    },
    /**
     * 进入绘画模式
     * @method draw
     * @param {function} [callback] 绘画结束时回调函数
     */
    draw(callback) {
      if (!this.layer) return
      const source = this.layer.getSource()
      const style = this.getStyle(this.brush)
      //-----------------------------------------------------
      const type = 'Circle'
      const map = this.olMap
      const draw = new Draw({
        type,
        source,
        style,
        geometryFunction: createBox()
      })
      this.drawStartHandler = e => {
        /**
         * 开始绘画时触发
         * @event drawstart
         * @param {Object} e 事件对象，{feature}
         */
        this.$emit('drawstart', e)
      }
      this.drawEndHandler = e => {
        callback && callback(e)
        console.log('绘图结束',e,e.target.sketchCoords_)
        /**
         * 结束绘画时触发
         * @event drawend
         * @param {Object} e 事件对象，{feature}
         */
        this.$emit('drawend', e)
      }
      draw.on('drawstart', this.drawStartHandler)
      draw.on('drawend', this.drawEndHandler)
      this.drawInstance = draw
      this.snapInstance = new Snap({source})
      map.addInteraction(draw)
      map.addInteraction(this.snapInstance)
    },
    /**
     * 进入绘画编辑模式
     * @method modify
     * @param {function} [callback] 编辑结束时回调函数
     */
    modify(callback) {
      if (!this.layer) return
      const map = this.olMap
      const source = this.layer.getSource()
      const style = this.getStyle(this.brush)
      const modify = new Modify({
        source,
        style
      });
      this.modifyStartHandler = e => {
        /**
         * 开始编辑时触发
         * @event modifystart
         * @param {Object} e 事件对象，{feature}
         */
        this.$emit('modifystart', e)
      }
      this.modifyEndHandler = e => {
        callback && callback(e)
        /**
         * 结束编辑时触发
         * @event modifyend
         * @param {Object} e 事件对象，{feature}
         */
        this.$emit('modifyend', e)
      }
      modify.on('modifystart', this.modifyStartHandler)
      modify.on('modifyend', this.modifyEndHandler)
      this.modifyInstance = modify
      map.addInteraction(this.modifyInstance)
    },
  }
}
</script>

<style lang="scss" scoped>
.DrawShapesDemo{
  width: 100%;
  height: calc(100% - 40px);
}
</style>